<template>
	<view class="my-settle-container">
		<!-- 全选 -->
			<label class="radio" @click="changeState">
				<radio color="#C00" :checked="isFullCheck"></radio>
				<text>全选</text>
			</label>
			
		<!-- 合计 -->
		<view class="amout-box">
			合计 :
			<text class="amout">￥{{chekedGoodsAmount}}</text>
		</view>
		<!-- 结算按钮 -->
		<view class="btn-settle" @click="settlement">
			结算 ：{{checkedCount}}
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapMutations, mapState } from 'vuex'
	export default {
		name:"my-settle",
		data() {
			return {
				// 倒计时描述
				seconds: 3,
				timer: null
			};
		},
		computed: {
			...mapGetters('m_cart', ['checkedCount','total','chekedGoodsAmount']),
			...mapGetters('m_user', ['addStr']),
			... mapState('m_user', ['mapState', 'token']),
			isFullCheck() {
				return this.total === this.checkedCount
			}
		},
		methods: {
			...mapMutations('m_cart', ['updateAllgoodsState']),
			...mapMutations('m_user', ['updateRedirectInfo']),
			changeState() {
				this.updateAllgoodsState(!this.isFullCheck)
			},
			settlement() {
				// 用户点击了结算按钮
				if (!this.checkedCount) {
					uni.$showMsg('请选择购物商品！')
				}
				// 2.再判断用户是否选择了收获地址 
				if (!this.addStr) {
					uni.$showMsg('请选择收获地址！')
				}
				
				// 3.最后判断用户是否登录了
				if (this.token) {
					// return uni.$showMsg('请先登录！')
					// 延时登录
					return uni.$showMsg("ok")
				} else {
					return this.delayNavigate()
				}
			},
			// 延迟导航到my页面
			delayNavigate() {
				this.seconds = 3
				// 展示提示信息，此时的seconds的值等于3
				this.showTips(this.seconds)
				// 2.创建定时器，每隔一秒执行一次
				   this.timer = setInterval( () => {
					if(this.seconds <= 1 ) {
						clearInterval(this.timer)
						
						uni.switchTab({
							url: '/pages/My/My',
							
							// 成功的回调,返回当前页面
							success: () => {
								this.updateRedirectInfo({
									// 跳转方式
									openType: 'switchTab',
									// 从哪个页面跳转的
									from: '/page/cart/cart'
								})
							}
						})	
					}
					// 秒数自减
					this.seconds--
					// 提示最新的秒数
					this.showTips(this.seconds)
					
				}, 1000)
			},
			// 展示倒计时的提示信息
			showTips(n) {
				// 调用方法展示提示信息
				uni.showToast({
					icon: 'none',
					title: '请登录后再结算!' + n + '秒后自动跳转到登录页',
					// 为页面添加透明面罩, 防止点击穿透
					mask: 'ture',
					// 1.5秒后消失
					duration: 1000
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-settle-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFEFF;
		font-size: 14px;
		.radio {
			padding-left: 5px;
		}
		.amout-box {
			.amout {
				color: #C00;
			}
		}
		.btn-settle {
			background-color: #C00;
			height: 40px;
			color: #FFFFFF;
			line-height: 40px;
			padding: 0 10px;
			margin-right: 5px;
			border-radius: 10px;
			min-width: 100px;
			text-align: center;
		}
	}
</style>
